<template>
  <div>
    <a-row>
      <a-col :span="12">
        <div style=";float:left">
          <div>基准/挑战：90/95</div>
        </div>
      </a-col>
      <a-col :span="2"></a-col>
      <a-col :span="10" style="float:right">

      </a-col>
    </a-row>
    <div id="ckcontainer"></div>

   <!-- 工单列表 -->
    <WorkOrderList v-if="showPage" :queryParam="queryParam" @cancelEvent="cancelEvent"></WorkOrderList>
  </div>
</template>

<script>
import { getOneLevelOpenRate, openingRateExport } from '@/api/public'
import WorkOrderList from '@/views/analysisManage/opening/workOrderList/workOrderList'
import moment from 'moment'
import { Column } from '@antv/g2plot'
import {} from '@/utils/util'
import {} from '@/api/public'
export default {
  props: ['startTime', 'endTime'],
  components: { WorkOrderList },
  data() {
    return {
      showPage:false,
      searchType: 1,
      queryParam: {},
      kkchartPlot: '',
      infoData: {},
      kkShow: false,
    }
  },
  watch: {
    startTime(val) {
      this.getDataInfo()
    },
  },
  created() {
    this.getDataInfo()
  },
  mounted() {},
  methods: {
    // 标签切换
    callBack(key) {},
    moment,
    //快开
    charInit(openData) {
      this.kkchartPlot = new Column(document.getElementById('ckcontainer'), {
        data: openData,
        xField: 'country',
        yField: 'ckRate',
        label: {},
        height: 200,
        forceFit: true,
        //柱状图颜色区分
        colorField: 'ckRate',
        color: (d) => {
          if (d < 90) {
            return '#E5703E'
          } else if (d >= 90 && d < 95) {
            return '#5687F4'
          } else {
            return '#5DCE3C'
          }
        },
        legend: {
          visible: false,
        },
        meta: {
          country: {
            alias: '查勘',
          },
          ckRate: {
            alias: '及时率',
          },
        },
        events: {
          onColumnClick: (e) => {
            this.queryParam.country = e.data.country
            this.queryParam.type =2
            this.showPage = true
          },
        },
      })
      this.kkchartPlot.render()
    },
    //取消弹窗
    cancelEvent() {
      this.showPage = false
    },
    //表格数据查询
    getDataInfo() {
      getOneLevelOpenRate(this.startTime, this.endTime).then(
        (res) => {
          if (res.code == 200) {
            if (this.kkchartPlot.length == undefined) {
              this.kkchartPlot.destroy()
            }
            let showData = res.data.map(function (currentValue, index, arr) {
              currentValue.ckRate = Math.abs(currentValue.ckRate.replace('%', ''))
              return currentValue
            })
            this.charInit(showData)
          } else {
            this.$message.error(res.msg)
          }
        },
        (error) => {
          this.$message.error(error)
        }
      )
    },
    //转小数
    toPoint(percent) {
      var str = percent.replace('%', '')
      str = str / 100
      return str
    },
  },
}
</script>
<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.fk1 {
  width: 12px;
  height: 12px;
}
.fkcompany {
  font-size: 12px;
  font-weight: 500;
  color: #3e3e3e;
  margin-left: 10px;
  margin-top: -2px;
}
.rangePicker {
  width: 220px;
  position: absolute;
  right: 10px;
  line-height: 56px;
  z-index: 11;
}
.weidabiao1 {
  float: right;
  font-size: 13px;
  font-weight: 500;
  color: #3e3e3e;
  // padding-top: 1px;
}

.weidabiao1-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #5dce3c;
  float: right;
}
.weidabiao2-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #e5703e;
  float: right;
}
.weidabiao3-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #5687f4;
  float: right;
}
</style>
